<div id="wizard" class="swMain">
	<!-- Steps headers -->
	<ul>
		{foreach $steps as $step}
			<li>
				<a href="#step-{$iterator->counter}">
					<span class="stepNumber">{$iterator->counter}</span>
					<span class="stepDesc">{$step->getTitle()}</span>
					
				</a>
			</li>
		{/foreach}
	</ul>
	
	<!-- Steps content -->
	{snippet staticHelperSnippet}
		{foreach $steps as $step}
			<div id="step-{$iterator->counter}">
			<h2 class="StepTitle">{$step->getTitle()}</h2>
			<p>{$step->getInfo()}</p>
			{if $step->getForm()}
				{var $name = $iterator->counter - 1}
				{var $snippetName = $iterator->counter}
				{snippet $snippetName}
					{control wizardForm$name}
				{/snippet}
			{/if}
			</div>
		{/foreach}
	{/snippet}
</div>

<script>
	$(document).ready(function() {
		
		// change steps status
		var stepsCount = {count($steps)};
		var changeArray = inicializeChangeArray();
		registerChangeListener();
		
		
		/**
	     * Incialize change array
		 * @returns Array	 
		 */
		function inicializeChangeArray(){
			var arr = new Array();
			for(var i = 1; i <= stepsCount; i++){
				arr[i] = 'changed';
			}
			return arr;
		}
		
		/**
		 * Check changes on forms
		 */
		function registerChangeListener(){
			$('#wizard form').change(function(){ 
				var id = $(this).attr('id');
				var formPrfix = 'frm-wizard-wizardForm';
				var changeStepId = parseInt(id.substring(formPrfix.length)) + 1;
				changeArray[changeStepId] = 'changed';
			});
		}
		
		// wizard inicialize
		$('#wizard').smartWizard({
			transitionEffect: 'slideleft',
			onLeaveStep: leaveAStepCallback,
			onFinish: onFinishCallback,
			enableFinishButton: false
		});
		
		// leave step callback
		function leaveAStepCallback(obj, context) {
			return validateSteps(context.fromStep); 
		}

		// finish wizard callback
		function onFinishCallback() {
			var stepsCount = {count($steps)};
			for (var i = 1; i <= stepsCount; i++) {
				if (!validateSteps(i)) {
					return false;
				}
			}
			
			window.location.href = {link finish!};
			return true;
		}

		// validation of steps
		function validateSteps(stepnumber){
			var formSelector = '#step-' + stepnumber + ' form';
			if($(formSelector).length > 0 && changeArray[stepnumber] === 'changed'){
				var response = submitMyForm(formSelector);
				if(typeof response.responseJSON !== 'undefined'){
//					console.log(response.responseText());
					if(response.responseJSON.status === true){
						$('#wizard').smartWizard('hideMessage');
						$('#wizard').smartWizard('setError',{ stepnum:stepnumber,iserror:false });
						changeArray[stepnumber] = 'notchanged';

						// makes form inputs dependency call
						checkNextFormsFields(stepnumber);
						return true;
					}else{
						var errorArray = response.responseJSON.errors;
						var errorMessage = '';
						$.each(errorArray, function(i){
							
							errorMessage += errorArray[i];
							if(errorArray.length - 1 > i){
								errorMessage += ', '
							}
						});
						$('#wizard').smartWizard('showMessage',errorMessage);
						$('#wizard').smartWizard('setError',{ stepnum:stepnumber,iserror:true }); 
						return false;
					}
				}else{
					return false;
				}
				
			}else{
				return true;
			}
		}
		
		/**
		 * Form inputs dependency
		 */
		function checkNextFormsFields(step){
			//invalidation of snippets
			var response = $.ajax({
					url: {link getActualFormFields!},
					type: 'POST',
					async: false,
					cache: false,
					timeout: 30000
				});
			
			var baseSnippetName = 'snippet-wizzard';
			if(typeof response.responseJSON !== 'undefined'){
				if (response.responseJSON.snippets) {
					for (var i in response.responseJSON.snippets) {
						var snippetStep = i.substring(baseSnippetName.length);
						if(snippetStep > step){
							changeArray[snippetStep] = 'changed';
							$('#' + i).html(response.responseJSON.snippets[i]);
						}
					}
				}
				
				registerChangeListener();
			}
		}
		
		// function for submit form
		function submitMyForm(formSelector){
			return $.ajax({
				url: $(formSelector).attr('action'),
				data: $(formSelector).serialize(),
				type: 'POST',
				async: false,
				cache: false,
				timeout: 30000
			});
		}
		
});
</script>